<template>
  <div id="store" v-if="data">
    <!-- 导航栏 -->
    <div class="AppBar">
      <p>符合条件的情况下可享受免息分期付款。</p>
      <a href="#">进一步了解 ></a>
    </div>
    <!-- 页面头文字介绍 -->
    <div class="hend">
      <div class="box">
        <h1>这个商店,</h1>
        <span>产品都称心,</span>
        <span>体验更如意。</span>
      </div>
      <div class="box1">
        <div class="box1-1">
          <div>
            <img :src="data[`store-chat-specialist-icon_AV3.png`]" />
          </div>
          <div class="box1-1-1">
            <p>需要协助选购？</p>
            <a href="#">咨询Specialist专家</a>
          </div>
        </div>
        <div class="box1-2">
          <div>
            <img :src="data[`store-chat-specialist-icon.png`]" />
          </div>
          <div class="box1-2-1">
            <p href="">前往 Apple Store 零售店</p>
            <a href="#">查找附近的零售店 ></a>
          </div>
        </div>
      </div>
    </div>
    <!-- 第一层产品样式 -->
    <div class="f1">
      <div class="center">
        <ul>
          <li @click="$router.push('/Mac')">
            <img :src="data[`store-card-13-mac-nav-202203.png`]" />
            <router-link to="/Mac">Mac</router-link>
          </li>
          <li @click="$router.push('/Iphone')">
            <img :src="data[`store-card-13-iphone-nav-202109.png`]" />
            <router-link to="/Iphone">iPhone</router-link>
          </li>
          <li @click="$router.push('/ipad')">
            <img :src="data[`store-card-13-ipad-nav-202108.png`]" />
            <router-link to="/ipad">iPad</router-link>
          </li>
          <li @click="$router.push('/Watch')">
            <img :src="data[`store-card-13-watch-nav-202203_GEO_CN.png`]" />
            <router-link to="/Watch">Apple Watch</router-link>
          </li>
          <li @click="$router.push('/Airpods')">
            <img :src="data[`store-card-13-airpods-nav-202110.png`]" />
            <router-link to="/Airpods">AirPods</router-link>
          </li>
          <li @click="$router.push('/AirTag')">
            <img :src="data[`store-card-13-airtags-nav-202108.png`]" />
            <router-link to="/AirTag">AirTag</router-link>
          </li>
          <li @click="$router.push('/Family')">
            <img :src="data[`store-card-13-homepod-nav-202110.png`]" />
            <router-link to="/Family">家居</router-link>
          </li>
          <li @click="$router.push('/Parts')">
            <img :src="data[`store-card-13-accessories-nav-202203.png`]" />
            <router-link to="/Parts">配件</router-link>
          </li>
        </ul>
      </div>
    </div>
    <!-- 第二层 -->
    <!-- 产品上新介绍标题 -->
    <div class="f2">
      <div class="center">
        <div class="title">
          <h3>上新了，</h3>
          <span>快来认识一下这些新朋友。</span>
        </div>
        <div class="img">
          <ul>
            <swiper class="mySwiper" :options="swiperOption">
              <swiper-slide>
                <li
                  class="xf1"
                  :style="`backgroundImage: url(${data['store-card-40-macbook-air-202206.png']}`"
                  @click="$router.push('/macbookAir-M2')"
                >
                  <p class="z">MACBOOK AIR (M2 芯片机型)</p>
                  <router-link to="/macbookAir-M2">别看清,别清看。</router-link>
                  <p class="x">RMB 9499 起</p>
                </li>
              </swiper-slide>

              <swiper-slide>
                <li
                  class="xf2"
                  :style="`backgroundImage: url(${data['store-card-50-bts-airpods-202206.png']}`"
                  @click="$router.push('/BackToSchool')"
                >
                  <p class="z">APPLE 独家优惠</p>
                  <router-link to="/BackToSchool"
                    >为高校生活购买 Mac 或iPad, 节省更多。</router-link
                  >
                  <p class="x">以教育优惠选购**,另外 AirPods 搭配其中</p>
                </li>
              </swiper-slide>

              <swiper-slide>
                <li
                  class="xf3"
                  :style="`backgroundImage: url(${data['store-card-40-iphone-13-202203.png']}`"
                  @click="$router.push('/iphone13')"
                >
                  <p class="z">IPHONE 13</p>
                  <router-link to="/iphone13">解锁超能力</router-link>
                  <p class="x">
                    现有绿色外观可选。RMB 5199 起, 还可以折抵换购。
                  </p>
                </li>
              </swiper-slide>

              <swiper-slide>
                <li
                  class="xf4"
                  :style="`backgroundImage: url(${data['store-card-40-macbook-pro-202206.png']}`"
                  @click="$router.push('/macpro-13')"
                >
                  <p class="z">MACBOOK PRO 13 英寸</p>
                  <router-link to="/macpro-13">超机动,硬实力。</router-link>
                  <p class="x">RMB 9999 起</p>
                </li>
              </swiper-slide>

              <swiper-slide>
                <li
                  class="xf5"
                  :style="`backgroundImage: url(${data['store-card-40-iphone-13-pro-202203.png']}`"
                  @click="$router.push('/iphone13pro')"
                >
                  <p class="z">IPHONE 13 PRO</p>
                  <router-link to="/iphone13pro">强得很</router-link>
                  <p class="x">
                    现有苍岭绿色外观可选。RMB 7999 起, 还可以折抵换购。
                  </p>
                </li>
              </swiper-slide>

              <swiper-slide>
                <li
                  class="xf6"
                  :style="`backgroundImage: url(${data['store-card-40-applewatchbands-202205.png']}`"
                >
                  <p class="z">APPLE WATCH 表带</p>
                  <a>来点颜色抢抢眼</a>
                  <p class="x">我款式,新配色,欢迎选购新表带。</p>
                </li>
              </swiper-slide>

              <swiper-slide>
                <li
                  class="xf7"
                  :style="`backgroundImage: url(${data['store-card-40-ipad-air-202203.png']}`"
                  @click="$router.push('/ipadAir')"
                >
                  <p class="z">IPAD AIR</p>
                  <router-link to="/ipadAir">轻,靓,重量级。</router-link>
                  <p class="x">RMB 4399 起</p>
                </li>
              </swiper-slide>

              <swiper-slide>
                <li
                  class="xf8"
                  :style="`backgroundImage: url(${data['store-card-40-iphone-se-202203.png']}`"
                  @click="$router.push('/iphoneSE')"
                >
                  <p class="z">IPHONE SE</p>
                  <router-link to="/iphoneSE">重磅实力,轻松入手。</router-link>
                  <p class="x">RMB 3499 起,还可折抵换购。</p>
                </li>
              </swiper-slide>
            </swiper>
          </ul>
          <!-- <p class="append-buttons"></p> -->
        </div>
      </div>
    </div>
    <!-- 第三层 -->
    <div class="f3">
      <div class="center">
        <div class="title1">
          <h3>帮手在此，</h3>
          <span>时时待命应你所需。</span>
        </div>
        <div class="img_1">
          <ul
            class="img_1-1"
            :style="`backgroundImage: url(${data['store-card-50-specialist-202108_GEO_CN.jpg']}`"
          >
            <li>
              <a href="#">Specialist 专家可在线一对一帮你选购。</a>
            </li>
          </ul>
          <ul class="img_1-2">
            <li
              class="li1"
              :style="`backgroundImage: url(${data['store-card-25-apps-202108.jpg']}`"
            >
              <a href="#">免费专人辅导,带你了解手中的新设备。</a>
            </li>
            <li
              class="li2"
              :style="`backgroundImage: url(${data['store-card-25-genius-202108.jpg']}`"
            >
              <a href="">来 Genius Bar 天才把,可获专业服务和技术支持</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 第四层 -->
    <div class="f4">
      <div class="center">
        <div class="title2">
          <h3>Apple Store 有特色，</h3>
          <span>在此选购有的是理由。</span>
        </div>
        <div class="img_2-1">
          <ul>
            <swiper class="mySwiper1" :options="swiperOption">
              <swiper-slide>
                <li class="sly-1" @click="$router.push('/shoplist')">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 36 56"
                    class="
                      as-svgicon as-svgicon-bagwithapple as-svgicon-elevated
                    "
                    aria-hidden="true"
                    role="img"
                    height="39"
                    width="39"
                  >
                    <g>
                      <rect width="36" height="56" fill="none"></rect>
                      <path
                        d="M31,12H25.931a7.99,7.99,0,0,0-15.861,0H5a5,5,0,0,0-5,4.99V41.012A5,5,0,0,0,5,46H31a5,5,0,0,0,5-4.988V16.99A5,5,0,0,0,31,12ZM18,6.985A6.015,6.015,0,0,1,23.91,12H12.09A6.015,6.015,0,0,1,18,6.985ZM34,41.012a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V16.99a3,3,0,0,1,3-3H31a3,3,0,0,1,3,3ZM23.6,24.833a3.383,3.383,0,0,0-1.568,2.822A3.222,3.222,0,0,0,24,30.639a6.884,6.884,0,0,1-1.008,2.1c-.624.9-1.312,1.812-2.3,1.812-1.008,0-1.248-.593-2.416-.593-1.12,0-1.52.609-2.432.609-.928,0-1.568-.834-2.3-1.876A9.18,9.18,0,0,1,12,27.8c0-2.87,1.872-4.394,3.7-4.394.992,0,1.792.641,2.4.641.592,0,1.488-.674,2.592-.674A3.415,3.415,0,0,1,23.6,24.833Zm-5.424-1.62c-.08,0-.144-.016-.208-.016,0-.048-.016-.16-.016-.273a3.287,3.287,0,0,1,.816-2,3.186,3.186,0,0,1,2.16-1.123,1.563,1.563,0,0,1,.016.289,3.387,3.387,0,0,1-.768,2.069A2.86,2.86,0,0,1,18.176,23.214Z"
                      ></path>
                    </g>
                  </svg>
                  <a href="#">在线订购,到货取货</a>
                </li>
              </swiper-slide>
              <swiper-slide>
                <li class="sly-2">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 36 56"
                    class="
                      as-svgicon
                      as-svgicon-delivery
                      as-svgicon-elevated
                      as-svgicon-deliverydelevated
                    "
                    aria-hidden="true"
                    role="img"
                    height="39"
                    width="39"
                  >
                    <g fill="#ff0053" fill-rule="evenodd">
                      <rect width="36" height="56" fill="none"></rect>
                      <path
                        d="M33.905,17.063l-14-7.581a3.991,3.991,0,0,0-3.811,0l-14,7.581A4,4,0,0,0,0,20.581V35.419a4,4,0,0,0,2.095,3.518l14,7.581a3.989,3.989,0,0,0,3.811,0l14-7.581A4,4,0,0,0,36,35.419V20.581A4,4,0,0,0,33.905,17.063ZM17.048,11.241a1.993,1.993,0,0,1,1.9,0l13.8,7.47-6.383,3.645L11.943,14.005ZM18,27.133,3.253,18.711l6.629-3.589L24.355,23.5ZM3.048,37.178A2,2,0,0,1,2,35.419V20.581a1.955,1.955,0,0,1,.036-.262L17,28.865V44.733ZM34,35.419a2,2,0,0,1-1.048,1.759L19,44.733V28.865l14.964-8.545a1.955,1.955,0,0,1,.036.262Z"
                      ></path>
                    </g>
                  </svg>
                  <a>免费送货上门。</a>
                </li>
              </swiper-slide>
              <swiper-slide>
                <li class="sly-3">
                  <svg
                    viewBox="0 0 43 56"
                    xmlns="http://www.w3.org/2000/svg"
                    class="
                      as-svgicon
                      as-svgicon-financing
                      as-svgicon-elevated
                      as-svgicon-financingelevated
                    "
                    aria-hidden="true"
                    role="img"
                    height="39"
                    width="39"
                  >
                    <path d="m0 0h43v56h-43z" fill="none"></path>
                    <path
                      d="m38.5 27a.99974.99974 0 0 0 -1 1v11a5.00588 5.00588 0 0 1 -5 5h-22a5.00588 5.00588 0 0 1 -5-5v-3.83594l1.543 1.543a.99989.99989 0 1 0 1.414-1.41406l-3.25-3.25a.99962.99962 0 0 0 -1.41406 0l-3.25 3.25a.99989.99989 0 1 0 1.41406 1.414l1.543-1.543v3.836a7.00818 7.00818 0 0 0 7 7h22a7.00818 7.00818 0 0 0 7-7v-11a.99974.99974 0 0 0 -1-1z"
                    ></path>
                    <path
                      d="m28.17188 32.71533a.31074.31074 0 0 0 -.35157.35156q0 .334.35157.334h2.62792a.29915.29915 0 0 0 .34278-.334.30692.30692 0 0 0 -.34278-.35156z"
                    ></path>
                    <path
                      d="m30.60156 21.32031a1.92007 1.92007 0 0 0 -1.40136-.47021h-15.75a1.94085 1.94085 0 0 0 -1.376.47021 1.81128 1.81128 0 0 0 -.50488 1.39307v10.43262h-.92481a.95033.95033 0 0 0 -.70312.29443 1.00858 1.00858 0 0 0 0 1.41553.9536.9536 0 0 0 .70312.29394h20.74416a1.96828 1.96828 0 0 0 1.415-.51855 1.78331 1.78331 0 0 0 .54492-1.35352v-8.376a1.78328 1.78328 0 0 0 -.54492-1.35352 1.96828 1.96828 0 0 0 -1.415-.51855h-.30762v-.31641a1.8689 1.8689 0 0 0 -.47949-1.39304zm-4.99609 3.58155v8.24414h-12.62109v-10.03711a.74576.74576 0 0 1 .84374-.84375h14.99415a.85949.85949 0 0 1 .63281.21093.827.827 0 0 1 .19971.55372h-2.08936a1.96828 1.96828 0 0 0 -1.415.51855 1.78328 1.78328 0 0 0 -.54496 1.35352zm5.53711-.334v-.35156h.09668a.94481.94481 0 0 1 .67676.23291.83527.83527 0 0 1 .24609.63721v8.00683a.83528.83528 0 0 1 -.24609.63721.94481.94481 0 0 1 -.67676.23291h-3.51563a.95761.95761 0 0 1 -.68554-.23291.83525.83525 0 0 1 -.2461-.63721v-8.00682a.83524.83524 0 0 1 .2461-.63721.95761.95761 0 0 1 .68554-.23291h.09668v.35156a.52959.52959 0 0 0 .14063.37793.48342.48342 0 0 0 .36914.14941h2.30273a.48342.48342 0 0 0 .36914-.14941.52959.52959 0 0 0 .14063-.37793z"
                    ></path>
                    <path
                      d="m42.457 19.293a.99962.99962 0 0 0 -1.41406 0l-1.543 1.543v-3.836a7.00818 7.00818 0 0 0 -7-7h-22a7.00818 7.00818 0 0 0 -7 7v11a1 1 0 0 0 2 0v-11a5.00588 5.00588 0 0 1 5-5h22a5.00588 5.00588 0 0 1 5 5v3.83594l-1.543-1.543a.99989.99989 0 0 0 -1.41394 1.41406l3.25 3.25a.99963.99963 0 0 0 1.41406 0l3.25-3.25a.99962.99962 0 0 0 -.00006-1.414z"
                    ></path>
                  </svg>
                  <a>折抵你的设置,换购新机享受优惠</a>
                </li>
              </swiper-slide>
              <swiper-slide>
                <li class="sly-4">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 42 56"
                    class="
                      as-svgicon
                      as-svgicon-financing
                      as-svgicon-elevated
                      as-svgicon-financingelevated
                    "
                    aria-hidden="true"
                    role="img"
                    height="39"
                    width="39"
                  >
                    <g fill="#68cc45">
                      <rect width="42" height="56" fill="none"></rect>
                      <path
                        d="M37,12H5a5.006,5.006,0,0,0-5,5V39a5.006,5.006,0,0,0,5,5H37a5.006,5.006,0,0,0,5-5V17A5.006,5.006,0,0,0,37,12ZM5,14H37a3,3,0,0,1,3,3v3H2V17A3,3,0,0,1,5,14ZM37,42H5a3,3,0,0,1-3-3V24H40V39A3,3,0,0,1,37,42ZM6,33.5v-4A1.5,1.5,0,0,1,7.5,28h6A1.5,1.5,0,0,1,15,29.5v4A1.5,1.5,0,0,1,13.5,35h-6A1.5,1.5,0,0,1,6,33.5Z"
                      ></path>
                    </g>
                  </svg>
                  <a>最长可享24个月免息分期。</a>
                </li>
              </swiper-slide>
              <swiper-slide>
                <li class="sly-5">
                  <svg
                    height="39"
                    viewBox="0 0 39 39"
                    width="39"
                    xmlns="http://www.w3.org/2000/svg"
                    class="
                      as-svgicon
                      as-svgicon-personalization
                      as-svgicon-elevated
                      as-svgicon-personalizationelevated
                    "
                  >
                    <g fill="#007aff" fill-rule="evenodd">
                      <path
                        d="m29.9688 25.5263c-1.694.486-3.42.851-5.177 1.094-1.757.242-3.517.364-5.281.364-1.75 0-3.511-.122-5.281-.364-1.772-.243-3.504-.608-5.198-1.094-.514-.903-.875-1.875-1.084-2.917 1.82.528 3.702.938 5.646 1.23 1.944.291 3.917.437 5.917.437 1.985 0 3.954-.146 5.906-.437 1.951-.292 3.829-.702 5.635-1.23-.208 1.056-.569 2.028-1.083 2.917m2.313-4.417c-.25-.208-.584-.25-1.001-.125-1.902.584-3.823 1.031-5.76 1.344-1.938.312-3.941.469-6.01.469s-4.077-.157-6.021-.469c-1.945-.313-3.861-.76-5.75-1.344-.431-.125-.775-.083-1.032.125-.257.209-.35.528-.281.959.25 2.083.98 3.972 2.188 5.666 1.208 1.695 2.756 3.045 4.646 4.052 1.889 1.007 3.972 1.511 6.25 1.511 2.264 0 4.34-.504 6.229-1.511s3.441-2.357 4.656-4.052c1.216-1.694 1.941-3.583 2.177-5.666.056-.431-.041-.75-.291-.959"
                      ></path>
                      <path
                        d="m12.167 16.9428c-.41-.472-.615-1.062-.615-1.771 0-.708.205-1.298.615-1.771.409-.472.885-.708 1.427-.708.569 0 1.066.236 1.489.708.424.473.636 1.063.636 1.771 0 .695-.215 1.281-.646 1.761-.43.479-.924.718-1.479.718-.542 0-1.018-.236-1.427-.708"
                      ></path>
                      <path
                        d="m23.9482 16.9326c-.417-.479-.625-1.066-.625-1.761 0-.708.208-1.298.625-1.77.416-.472.896-.709 1.437-.709.556 0 1.042.237 1.459.709s.625 1.062.625 1.77c0 .709-.208 1.299-.625 1.771s-.903.709-1.459.709c-.541 0-1.021-.24-1.437-.719"
                      ></path>
                      <path
                        d="m19.5 0c-10.77 0-19.5 8.73-19.5 19.5s8.73 19.5 19.5 19.5 19.5-8.73 19.5-19.5-8.73-19.5-19.5-19.5m0 2.2c9.539 0 17.3 7.761 17.3 17.3 0 9.54-7.761 17.3-17.3 17.3s-17.3-7.76-17.3-17.3c0-9.539 7.761-17.3 17.3-17.3"
                      ></path>
                    </g>
                  </svg>
                  <a>这一刻,属于你。混搭表情符号，名字和数字,一起免费刻</a>
                </li>
              </swiper-slide>
              <swiper-slide>
                <li class="sly-6">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 29 56"
                    class="as-svgicon as-svgicon-applelogo as-svgicon-elevated"
                    aria-hidden="true"
                    role="img"
                    height="39"
                    width="39"
                  >
                    <g>
                      <rect width="29" height="56" fill="none"></rect>
                      <defs id="defs2334">
                        <linearGradient id="linearGradient2904">
                          <stop
                            style="stop-color: #f8ab5e; stop-opacity: 1"
                            offset="0"
                            id="stop2900"
                          ></stop>
                          <stop
                            style="stop-color: #f3695f; stop-opacity: 1"
                            offset="1"
                            id="stop2902"
                          ></stop>
                        </linearGradient>
                        <linearGradient
                          xlink:href="#linearGradient2904"
                          id="linearGradient2906"
                          x1="0.16650136"
                          y1="23.976196"
                          x2="15.151624"
                          y2="23.976196"
                          gradientUnits="userSpaceOnUse"
                        ></linearGradient>
                      </defs>
                      <g>
                        <path
                          id="path2324"
                          d="m 14.9,14.43 a 2.581,2.581 0 0 1 -0.472,-0.045 3.083,3.083 0 0 1 -0.067,-0.629 7.531,7.531 0 0 1 1.909,-4.694 7.76,7.76 0 0 1 5.1,-2.628 3.329,3.329 0 0 1 0.067,0.7 7.745,7.745 0 0 1 -1.837,4.825 6.728,6.728 0 0 1 -4.7,2.471 z m 12.807,3.818 a 7.851,7.851 0 0 0 -3.751,6.6 7.64,7.64 0 0 0 4.649,7.008 18.257,18.257 0 0 1 -2.381,4.919 c -1.482,2.134 -3.032,4.268 -5.391,4.268 -2.359,0 -2.965,-1.37 -5.683,-1.37 -2.65,0 -3.594,1.415 -5.75,1.415 -2.156,0 -3.661,-1.977 -5.391,-4.4 A 21.279,21.279 0 0 1 0.395,25.211 c 0,-6.738 4.38,-10.31 8.692,-10.31 2.291,0 4.2,1.5 5.638,1.5 1.37,0 3.5,-1.595 6.109,-1.595 a 8.172,8.172 0 0 1 6.873,3.442 z"
                          style="
                            fill-opacity: 1;
                            fill: url(#linearGradient2906);
                          "
                        ></path>
                      </g>
                    </g>
                  </svg>
                  <a>定制你的 Mac,打造个性十足的 Apple Watch。</a>
                </li>
              </swiper-slide>
              <swiper-slide>
                <li class="sly-7">
                  <svg
                    enable-background="new 0 0 36 56"
                    viewBox="0 0 36 56"
                    class="as-svgicon as-svgicon-appgift as-svgicon-elevated"
                    aria-hidden="true"
                    role="img"
                    height="39"
                    width="39"
                  >
                    <g fill="#f33" fill-rule="evenodd">
                      <path d="m0 0h36v56h-36z" fill="none"></path>
                      <path
                        d="m29 10h-22c-3.866 0-7 3.134-7 7v22c0 3.866 3.134 7 7 7h22c3.866 0 7-3.134 7-7v-22c0-3.866-3.134-7-7-7zm5 7v10h-7.565c2.6389-1.5594 4.291-3.8663 4.291-6.4141 0-2.7765-2.2625-4.7654-4.7873-4.7654-3.0232 0-5.4566 1.9169-6.9387 4.9202v-8.7407h10c2.757 0 5 2.243 5 5zm-14.5479 10c.3248-5.3832 2.9524-9.1795 6.4866-9.1795 1.3701 0 2.7873 1.0344 2.7873 2.7654 0 3.2648-4.1179 6.0554-9.2154 6.4141zm-2.9627 0c-5.0975-.3588-9.2154-3.1493-9.2154-6.4141 0-1.731 1.4172-2.7654 2.7874-2.7654 3.5341 0 6.1617 3.7963 6.4865 9.1795zm-9.4894-15h10v8.7407c-1.4821-3.0033-3.9155-4.9202-6.9386-4.9202-2.5249 0-4.7874 1.9889-4.7874 4.7654 0 2.5479 1.6521 4.8547 4.291 6.4141h-7.565v-10c0-2.757 2.243-5 5-5zm-5 27v-10h13.3406c-.8827 2.098-3.6281 7.3366-9.3372 8.2485-.5454.0869-.917.5996-.8296 1.145.0786.4922.5034.8423.9858.8423.0527 0 .106-.0039.1592-.0127 6.3694-1.017 9.4953-6.3386 10.6812-9.001v13.7779h-10c-2.757 0-5-2.243-5-5zm27 5h-10v-13.7779c1.1859 2.6625 4.3117 7.9841 10.6812 9.001.0532.0088.1064.0127.1592.0127.4824 0 .9077-.3506.9858-.8423.0874-.5454-.2842-1.0581-.8296-1.145-5.7092-.9119-8.4545-6.1505-9.3372-8.2485h13.3406v10c0 2.757-2.243 5-5 5z"
                      ></path>
                    </g>
                  </svg>
                  <a>加点心思,礼物更显心意。</a>
                </li>
              </swiper-slide>
            </swiper>
          </ul>
        </div>
      </div>
    </div>
    <!-- 第五层 -->
    <div class="f5">
      <div class="center">
        <div class="title3">
          <h3>缤纷配件，</h3>
          <span>校园生活必备,绝配你的设备。</span>
        </div>
        <div class="img_3">
          <swiper class="mySwipe2" :options="swiperOption">
            <swiper-slide>
              <div class="bj">
                <ul>
                  <li
                    :style="`backgroundImage: url(${data['store-card-40-accesories-bts-202206_GEO_CN.jpg']}`"
                  >
                    <div>
                      <span>选购校园好装备</span>
                      <h3>校园生活好装备。</h3>
                    </div>
                  </li>
                </ul>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_1">
                <div class="y_1">
                  <div class="tu_1">
                    <img :src="data[`MU8F2.jpg`]" />
                  </div>
                  <div class="nr_1">
                    <span>免费镌刻服务</span>
                    <h3><a href="#">Apple pencil（第二代）</a></h3>
                    <span>RMB 969</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_2">
                <div class="y_2">
                  <div class="tu_2">
                    <img :src="data[`MMMR3CH.jpg`]" />
                  </div>
                  <div class="nr_2">
                    <ul>
                      <li><img :src="data[`MK2C3CH_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MH0D3_SW_COLOR.jpg`]" /></li>
                    </ul>
                    <span>新款</span>
                    <h3>
                      <a href="#"
                        >带有触控 ID 和数字小键盘的妙控键盘 (适用于配备 Apple
                        芯片的 Mac 机型)</a
                      >
                    </h3>
                    <span>RMB 1,399</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_3">
                <div class="y_3">
                  <div class="tu_3">
                    <img :src="data[`MNA73.jpg`]" />
                  </div>
                  <div class="nr_3">
                    <ul>
                      <li><img :src="data[`MNA73_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MNA43_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MJM23_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MH0A3_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MNA63_SW_COLOR (1).jpg`]" /></li>
                      <li><img :src="data[`MH0D3_SW_COLOR.jpg`]" /></li>
                    </ul>
                    <span>新款</span>
                    <h3>
                      <a href="#"
                        >适用于 iPad Air (第五代) 的智能双面夹 - 海蓝色</a
                      >
                    </h3>
                    <span>RMB 549</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_4">
                <div class="y_4">
                  <div class="tu_4">
                    <img :src="data[`MMMQ3.jpg`]" />
                  </div>
                  <div class="nr_4">
                    <ul>
                      <li><img :src="data[`MH0A3_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MH0D3_SW_COLOR.jpg`]" /></li>
                    </ul>
                    <span>新款</span>
                    <h3><a href="#">妙控鼠标-黑色多点触控表面</a></h3>
                    <span>RMB 699</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_5">
                <div class="y_5">
                  <div class="tu_5">
                    <img :src="data[`airtag-4pack-select-202104.jpg`]" />
                  </div>
                  <div class="nr_5">
                    <span>免费镌刻服务</span>
                    <h3>
                      <router-link to="/AirtagH">AirTag 四件装</router-link>
                    </h3>
                    <span>RMB 799</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_6">
                <div class="y_6">
                  <div class="tu_6">
                    <img :src="data[`MN6L3.jpg`]" />
                  </div>
                  <div class="nr_6">
                    <ul>
                      <li>
                        <img :src="data[`MN6K3_SW_COLOR.jpg`]" />
                      </li>
                    </ul>
                    <span>新款</span>
                    <h3><a href="#">45 毫米彩虹版回环式运动表带</a></h3>
                    <span>RMB 799</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div
                class="bj_7"
                :style="`backgroundImage: url(${data['store-card-40-accessories-202205.png']}`"
              >
                <ul>
                  <li>
                    <div>
                      <h3>探索所有配件。</h3>
                    </div>
                  </li>
                </ul>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <div class="f6">
      <div class="center">
        <div class="title4">
          <h3>声声动听。</h3>
          <span>音质丰富饱满，个个都悦耳。</span>
        </div>
        <div class="img_4">
          <swiper class="mySwiper3" :options="swiperOption">
            <swiper-slide>
              <div class="bj_2">
                <ul>
                  <li
                    :style="`backgroundImage: url(${data['store-card-40-applemusic-202112.jpg']}`"
                  >
                    <div>
                      <span>Apple Music 免费试听<br />6个月。</span>
                      <h3>
                        购买指定 AirPods 或 Beats 产品,或者 HomePod mini,Apple
                        Music 免费听起来*。
                      </h3>
                    </div>
                  </li>
                </ul>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_2_1">
                <div class="y_2_1">
                  <div class="tu_2_1">
                    <img :src="data[`MME73.jpg`]" />
                  </div>
                  <div class="nr_2_1">
                    <span>免费镌刻服务</span>
                    <h3>
                      <router-link to="/AirPods3"
                        >AirPods（第三代）</router-link
                      >
                    </h3>
                    <span>RMB 1,399</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_2_2">
                <div class="y_2_2">
                  <div class="tu_2_2">
                    <img :src="data[`MJ4X3.jpg`]" />
                  </div>
                  <div class="nr_2_2">
                    <ul>
                      <li><img :src="data[`MJ4Y3_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MMT83_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MK2J3_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MMT73_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MMMR3CH_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MJ503_SW_COLOR.jpg`]" /></li>
                    </ul>
                    <h3>
                      <a href="#">Beats Studio Buds - 真无线降噪耳机 - 黑色</a>
                    </h3>
                    <span>RMB 1,099</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_2_3">
                <div class="y_2_3">
                  <div class="tu_2_3">
                    <img :src="data[`MWP22.jpg`]" />
                  </div>
                  <div class="nr_2_3">
                    <span>免费镌刻服务</span>
                    <h3>
                      <router-link to="/Airpodspro">AirPods pro</router-link>
                    </h3>
                    <span>RMB 1,999</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_2_4">
                <div class="y_2_4">
                  <div class="tu_2_4">
                    <img :src="data[`homepod-mini-select-blue-202110.jpg`]" />
                  </div>
                  <div class="nr_2_4">
                    <ul>
                      <li><img :src="data[`MH0D3_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MNA73_SW_COLOR.jpg`]" /></li>
                      <li><img :src="data[`MH0A3_SW_COLOR.jpg`]" /></li>
                      <li>
                        <img
                          :src="
                            data[
                              `homepod-mini-select-yellow-202110_SW_COLOR.jpg`
                            ]
                          "
                        />
                      </li>
                      <li><img :src="data[`MJM23_SW_COLOR.jpg`]" /></li>
                    </ul>
                    <span>新款</span>
                    <h3>
                      <router-link to="/HomepodMini"
                        >HomePod mini - 蓝色</router-link
                      >
                    </h3>
                    <span>RMB 749</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_2_5">
                <div class="y_2_5">
                  <div class="tu_2_5">
                    <img :src="data[`airpods-max-select-silver-202011.jpg`]" />
                  </div>
                  <div class="nr_2_5">
                    <ul>
                      <li>
                        <img
                          :src="
                            data[
                              `airpods-max-select-spacegray-202011_SW_COLOR.jpg`
                            ]
                          "
                        />
                      </li>
                      <li>
                        <img
                          :src="
                            data[
                              `airpods-max-select-silver-202011_SW_COLOR.jpg`
                            ]
                          "
                        />
                      </li>
                      <li>
                        <img
                          :src="
                            data[`airpods-max-select-green-202011_SW_COLOR.jpg`]
                          "
                        />
                      </li>
                      <li>
                        <img
                          :src="
                            data[`airpods-max-select-pink-202011_SW_COLOR.jpg`]
                          "
                        />
                      </li>
                      <li>
                        <img
                          :src="
                            data[
                              `airpods-max-select-skyblue-202011_SW_COLOR.jpg`
                            ]
                          "
                        />
                      </li>
                    </ul>
                    <span>免费镌刻服务</span>

                    <h3>
                      <router-link to="/AirpodsMax"
                        >AirPods Max - 银色</router-link
                      >
                    </h3>
                    <span>RMB 4,399</span>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="bj_2_6">
            <div class="y_2_6">
              <div class="tu_2_6">
                <img :src="data[`MK2F3.jpg`]" />
              </div>
              <div class="nr_2_6">
                <ul>
                  <li><img :src="data[`MJ4X3_SW_COLOR.jpg`]" /></li>
                  <li><img :src="data[`MH0A3_SW_COLOR.jpg`]" /></li>
                  <li><img :src="data[`MK2H3_SW_COLOR.jpg`]" /></li>
                  <li><img :src="data[`MK2J3_SW_COLOR.jpg`]" /></li>
                </ul>
                <span>免费镌刻服务</span>
                <h3>
                  <a href="#">Beats Fit Pro 真无线耳机 — Beats 经典黑红</a>
                </h3>
                <span>RMB 1,599</span>
              </div>
            </div>
          </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    <div class="f7">
      <div class="center">
        <div class="title5">
          <h3>全方位 Apple 体验。</h3>
          <span>让 Apple 产品和服务助你大显身手。</span>
        </div>
        <div class="img_5">
          <ul
            class="img_5-1"
            :style="`backgroundImage: url(${data['store-card-50-todayatapple-202108.png']}`"
          >
            <li>
              <span>边看边学</span>
              <h3><a href="#">参加 Today at Apple 在线课程。</a></h3>
            </li>
          </ul>
          <ul
            class="img_5-2"
            :style="`backgroundImage: url(${data['store-card-50-applepay-202110_GEO_CN.jpg']}`"
          >
            <li>
              <h3><a href="#">探索 Apple Pay 的各种用法。</a></h3>
            </li>
          </ul>
          <ul
            class="img_5-3"
            :style="`backgroundImage: url(${data['store-card-50-homekit-202110_GEO_CN.jpg']}`"
          >
            <li>
              <span>家庭</span>
              <h3><a href="#">看看一个 app 如何掌控你的整个家。</a></h3>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="f8">
      <div class="center">
        <div class="title6">
          <h3>专属商店。</h3>
          <span>为教育、商务等提供专享优惠。</span>
        </div>
        <div class="img_6">
          <ul
            class="img_6-1"
            :style="`backgroundImage: url(${data['store-card-40-edu-202108_GEO_CN.jpg']}`"
          >
            <li>
              <span>教育</span>
              <h3>
                <a href="#">以教育优惠购买 Mac 或 iPad,可节省更多</a
                ><sup>3</sup>
              </h3>
            </li>
          </ul>
          <ul
            class="img_6-2"
            :style="`backgroundImage: url(${data['store-card-40-small-business-202108_GEO_CN.jpg']}`"
          >
            <li>
              <span>商务</span>
              <h3>
                <a href="#">从大公司到小企业，我们都能助你一臂之力</a
                ><sup>3</sup>
              </h3>
            </li>
          </ul>
          <ul
            class="img_6-3"
            :style="`backgroundImage: url(${data['store-card-40-refurb-202108.jpg']}`"
          >
            <li>
              <span>认证的翻新产品</span>
              <h3><a href="#">选购 Apple 翻新产品，享受一年保修服务。</a></h3>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "swiper-example-space-between",
  title: "Space between slides",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      data: null,
      swiperOption: {
        slidesPerView: 7,
        spaceBetween: 30,
        centeredSlides: true,
      },
    };
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/ZFWImg";
      axios.get(url).then((res) => {
        this.data = res.data;
        console.log(res.data);
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
#store {
  width: 100%;
  height: 100%;
}
</style>
<style scoped src="../assets/css/store.css"></style>